<template>
  <div class="container container-1200" style="height: 100%;">
    <div class="imgFrame">
      <img :src="headImg" alt="要闻图" @click="toLink(imageLink)" class="noticeImg" />
    </div>
<!--    名家微博-->
    <div class="topContainer flex justify-between">
      <div class="famous"><span>名家微博</span></div>
      <div class="topic">
        <div class="container-1200 flex align-center">
          <swiper class="swiper" ref="swiper" :options="swiperOption">
            <swiper-slide class="swiperItem" v-for="(item,index) in slideShow" :key="index" ><img :src="item.image_url" @click="toLink(item.jump_url)" width="150" height="150"/></swiper-slide>
<!--            <img :src="item.image_url" alt="要闻图" class="noticeImg" />-->
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      </div>
    </div>
    <div class="telSwiper">
      <el-carousel :interval="4000" type="card" indicator-position="none">
        <el-carousel-item v-for="(item,index2) in slideShow" :key="index2">
          <img :src="item.image_url" width="150" height="150"/>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="publicPanel flex justify-between align-start">
      <div class="leftPanel peopleLeft flex justify-between flex-wrap">
        <div class="leftTitle flex align-center"><i class="iconfont">&#xe653;</i>互动服务</div>
        <div class="leftItem"
             v-for="(item,index3) in peopleIcon"
             :key="index3"
             :class="{'isChose': publicItemId == index3}"
             @click="chosePublicIcon(index3)">
          <div class="imgBox"><img :src="publicItemId == index3 ? chosedIcon[publicItemId].url : item.url" height="34px"></div>
          <i>{{item.title}}</i>
        </div>
      </div>
      <div class="rightPanel bannerList">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item,index) in panelTitle" :key="index" label="用户管理" :name="'name'+index">
              <span slot="label" class="tabtitle flex align-center">
                <i class="iconfont" v-if="activeName == 'name'+index">&#xe8b9;</i>
                <span class="span-box">
                  <span>{{ item.title }}</span>
                </span>
              </span>
            <div class="listPanel flex justify-between" v-if="activeName == 'name'+index">
              <ul>
                <li v-for="(item,index) in downList.slice(0,6)" :key="index"><div class="title" @click="toLink(item.jump_url)">{{item.title}}</div><i class="time">2020-11-30</i></li>
              </ul>
              <ul>
                <li v-for="(item,index) in downList.slice(7)" :key="index"><div class="title" @click="toLink(item.jump_url)">{{item.title}}</div><i class="time">2020-11-30</i></li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "Interaction",
  data(){
    return {
      headImg:'',
      imageLink:'',
      slideShow:'',
      activeName: 'name0',
      publicItemId: 0,
      titleList:'',
      downList:'',
      tabType:1,
      idType:'',
      // toShow:false,
      chosedIcon: [
        { url:require('../assets/image/index/zc.png'), title: '政策'},
        { url:require('../assets/image/index/zn.png'), title: '信息公开指南'},
        { url:require('../assets/image/index/zd.png'), title: '信息公开制度'},
        { url:require('../assets/image/index/pt.png'), title: '法定主动公开内容'},
        { url:require('../assets/image/index/nb.png'), title: '信息公开年报'},
        { url:require('../assets/image/index/yf.png'), title: '已申请公开'},
      ],
      peopleIcon: [
        { url:require('../assets/image/index/slzc.png'), title: '信访接待'},
        { url:require('../assets/image/index/slzn.png'), title: '热点回应'},
        { url:require('../assets/image/index/slzd.png'), title: '民意征集'},
        { url:require('../assets/image/index/slpt.png'), title: '网上调查'},
      ],
      panelTitle:[
        {title: '图文访谈'},
        {title: '专家答疑'},
        {title: '便民问答'},
      ],
      swiperOption: {
        slidesPerView: 6,
        spaceBetween: 30,
        direction: 'horizontal',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          resize: () => {
            this.$refs.swiper.$swiper.changeDirection(
                window.innerWidth <= 960
                    ? 'vertical'
                    : 'horizontal'
            )
          }
        }
      },
    }
  },
  mounted(){
    this.getHeadImg()
    this.getSlideShow()
    this.getDownList()
    // this.searchFormWidth()
  },
  methods: {
    // 获取顶部图片
    async getHeadImg() {
      const res = await this.$http.get("/api/interactive/tu");
      if (res.code == 200) {
        this.headImg = res.data.image_url;
        this.imageLink = res.data.url
      }
    },
    // 获取轮播图
    async getSlideShow() {
      const res = await this.$http.get("/api/web/column");
      if (res.code == 200) {
        this.slideShow = res.data;
      }
    },
    //  图文访谈
    async getDownList() {
      const res = await this.$http.get("/api/interactive/tab",{
        type: this.tabType
      });
      if (res.code == 200) {
        this.downList = res.data
      }
    },
    handleClick(tab) {
      this.activeName = tab.name
      this.tabType = tab.index*1+1
      this.getDownList()
    },
    chosePublicIcon(id){
      this.publicItemId = id;
    },
    toLink(url){
      window.open(url)
    },
    // searchFormWidth() {
    //   let w = window.innerWidth;
    //   if(w > 600) {
    //     this.toShow = false
    //   }else{
    //     this.toShow = true
    //   }
    // }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  components: {
    swiper,
    swiperSlide
  },
}
</script>
<style>
.el-carousel__container{
  margin-top: 30px;
}
@media screen and (max-width: 600px) {
  .el-tabs__nav{
    /*width: 100%;*/
  }
}
</style>
<style scoped lang="scss">
.container{
  .imgFrame {
    width: 100%;
    height: 100%;
    margin-bottom: 50px;
    margin-top: 20px;
    .noticeImg {
      width: 100%;
      height: 100%;
    }
  }
  .famous{
    width: 54px;
    height: 156px;
    color: #2c64ff;
    text-align: center;
    border: 1px solid #2c64ff;
    padding-top: 15px ;
    span{
      width: 24px;
      height: 105px;
      font-size: 24px;
      font-weight: bold;
      line-height: 30px;
      letter-spacing: 3px;
      color: #2c64ff;
    }
  }

  .topic{
    width: 1100px;
    height: 156px;
    .swiper{
      width: 100%;
      overflow: hidden;
      .swiperItem{
        width: 150px;
        height: 150px;
        margin-right: 10px;
        border: 1px solid lightgray;
      }
    }
  }
  .telSwiper{
    display: none;
  }

  .publicPanel{
    width: 100%;
    margin-top: 38px;
    margin-bottom: 30px;
    .secLeft{
      width: 676px;
      height: 322px;
      border-radius: 10px;
      overflow: hidden;
    }
    .leftPanel{
      width: 100%;
      .leftTitle{
        text-align: left;
        width: 100%;
        line-height: 60px;
        color: #2c64ff;
        font-weight: bold;
        .iconfont{
          font-size: 24px;
          font-weight: normal;
        }
      }
      .leftItem{
        width: 90px;
        //height: 110px;
        border-radius: 6px;
        cursor: pointer;
        margin-bottom: 30px;
        padding: 20px 4px;
        .imgBox{
          width: 100%;
          margin-bottom: 18px;
        }
        i{
          font-size: 18px;
          line-height: 20px;
          color: #2c64ff;
          font-weight: normal;
        }
        &.isChose{
          background: #2c64ff;
          i{
            color: #ffffff;
          }
        }
      }
    }
    .peopleLeft{
      width: 240px;
    }
    .secIcons{
      width: 500px;
      .leftItem{
        width: 100px;
        margin-right: 20px;
        i{
          font-size: 14px;
        }
      }
    }
    .rightPanel{
      flex: 1;
      height: 337px;
      background-color: #ffffff;
      overflow: hidden;
      margin-left: 30px;
      .tabtitle{
        .iconfont{
          font-size: 22px;
        }
      }
      .listPanel{
        width: 100%;
        padding-left: 20px;
        ul{
          width: 45%;
          li {
            width: 100%;
            //overflow: hidden;
            //text-overflow:ellipsis;
            //white-space: nowrap;
            list-style: disc;
            line-height: 36px;
            font-size: 18px;
            font-weight: 500;
            color: #333333;
            cursor: pointer;
            position: relative;
            &:hover{
              color: #2c64ff;
            }
            .title{
              width: 80%;
              float: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: left;
            }
            .time{
              position: absolute;
              right: 10px;
              font-size: 14px;
              line-height: 36px;
              float: left;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 600px) {
  .topContainer{
    flex-direction: column;
    .famous{
      width: 100px;
      height: 30px;
      padding-top: 0;
      //span{
      //  width: 100px;
      //  height: 30px;
      //}
    }
    .topic{
      display: none;
    }
  }
    .telSwiper{
      display: unset !important;
    }
  .famous span{
    font-size: 18px !important;
  }
  .swiperItem{
    width: 100px;
    height: 100px;
    border: none;
    img{
      width: 140px;
      height: 140px;
    }
  }
  .publicPanel{
    flex-direction: column;
    //.leftPanel{
    //  flex-direction: column;
    //  //width: 100% !important;
    //  padding-left: 20px;
    //  .leftItem{
    //    transform: scale(.8);
    //    margin-bottom: 0 !important;
    //  }
    //}
    .rightPanel{
      width: 100%;
      margin-top: 15px;
      flex: unset !important;
      //margin-right: 100px;
      li{
        font-size: 14px !important;
      }
    }
    //flex-direction: column;
    .listPanel{
      flex-direction: column;
    }
  }
  .container .publicPanel .peopleLeft{
    width: 100%;
  }
}
</style>